<template>
  <el-container class="allbody" onscroll="false">

    <el-header style="height: 9.5%" class="headerbackgroud">
      <div style="color: white;font-size: 30px;text-align: center;margin-top: 20px;margin-left: 70px">特种设备检测监测云平台</div>
      <el-card style="width:150px;height:50px;text-align:left;margin-left:80px;margin-top:-30px;border-radius:30px;background-color: #7d93ea">
        <div style="color: white;margin-left: 6px;margin-top: -10px">
          大连特种设备工业有限公司
        </div>
      </el-card>
      <el-card style="width:127px;height:60px;align-items:right;margin-left:1600px;margin-top:-30px;border-radius:30px;background-color: #7d93ea">
        <div style="color: white;margin-left: 15px;margin-top: -8px">
          {{dateFormat(date)}}
        </div>
      </el-card>
      <el-card style="width:150px;height:50px;align-items:right;margin-left:1400px;margin-top:-60px;border-radius:30px;background-color: #7d93ea">
        <div style="color: white;margin-left: 15px;margin-top: -8px">
          数据仓储-定检数据
        </div>
      </el-card>
    </el-header>

    <el-main style="height: 100%; z-index: 5">
      <!--<Calendar-->
      <!--v-on:choseDay="clickDay"-->
      <!--v-on:changeMonth="changeDate"-->
      <!--&gt;</Calendar>-->
      <el-row style="width: 100%;height: 9%">
        <el-form :inline="true" class="demo-form-inline" style="margin-top: 20px;margin-left: 10px">
          <el-form-item label="设备编号：">
            <el-input v-model="keyword" placeholder="KQ13063" style="width: 150px;" @input="change($event)"></el-input>
          </el-form-item>

          <el-form-item label="使用单位：">
            <el-input v-model="keyword" placeholder="中化南通石化储运有限公司" style="width: 300px;" @input="change($event)"></el-input>
          </el-form-item>

          <el-form-item label="设备类型：">
            <el-input v-model="keyword" placeholder="浮顶型" style="width: 150px;" @input="change($event)"></el-input>
          </el-form-item>

          <el-form-item style="margin-left: 50%">
            <el-link href="#" :underline="false" type="warning" target="_blank" >筛选</el-link>
          </el-form-item>

        </el-form>

      </el-row>


      <el-row style="width: 100%;height: 80%;margin-top: -1%">

        <el-row style="height: 100%;width: 100%">
          <el-container style="height: 15%;width: 100%;">
            <el-aside style="height: 100%;width: 100%;border: 1px solid #3b7cbd; ">
              <div style="color: whitesmoke;font-size: 42px;margin-top: 24px;text-align: center">资料审查报告</div>
            </el-aside>
          </el-container>

          <el-container style="height: 9%;width: 100%;">
            <el-aside style="height: 100%;width: 10%;border: 1px solid #3b7cbd; ">
              <div style="color: whitesmoke;font-size: 25px;margin-top: 15px;text-align: center">储罐类型</div>
            </el-aside>
            <el-aside style="height: 100%;width: 40%;border: 1px solid #3b7cbd; ">
              <div style="color: whitesmoke;font-size: 25px;margin-top: 15px;text-align: center">立式圆角型</div>
            </el-aside>
            <el-aside style="height: 100%;width: 10%;border: 1px solid #3b7cbd; ">
              <div style="color: whitesmoke;font-size: 25px;margin-top: 15px;text-align: center">罐顶型式</div>
            </el-aside>
            <el-aside style="height: 100%;width: 40%;border: 1px solid #3b7cbd; ">
              <div style="color: whitesmoke;font-size: 25px;margin-top: 15px;text-align: center">拱顶</div>
            </el-aside>
          </el-container>

          <el-container style="height: 9%;width: 100%;">
            <el-aside style="height: 100%;width: 10%;border: 1px solid #3b7cbd; ">
              <div style="color: whitesmoke;font-size: 25px;margin-top: 15px;text-align: center">设计规范</div>
            </el-aside>
            <el-aside style="height: 100%;width: 40%;border: 1px solid #3b7cbd; ">
              <div style="color: whitesmoke;font-size: 25px;margin-top: 15px;text-align: center">不详</div>
            </el-aside>
            <el-aside style="height: 100%;width: 10%;border: 1px solid #3b7cbd; ">
              <div style="color: whitesmoke;font-size: 25px;margin-top: 15px;text-align: center">公称容积</div>
            </el-aside>
            <el-aside style="height: 100%;width: 40%;border: 1px solid #3b7cbd; ">
              <div style="color: whitesmoke;font-size: 25px;margin-top: 15px;text-align: center">1000m<sup>3</sup></div>
            </el-aside>
          </el-container>

          <el-container style="height: 9%;width: 100%;">
            <el-aside style="height: 100%;width: 10%;border: 1px solid #3b7cbd; ">
              <div style="color: whitesmoke;font-size: 25px;margin-top: 15px;text-align: center">设计压力</div>
            </el-aside>
            <el-aside style="height: 100%;width: 40%;border: 1px solid #3b7cbd; ">
              <div style="color: whitesmoke;font-size: 25px;margin-top: 15px;text-align: center">Internal 7.5 mbar</div>
            </el-aside>
            <el-aside style="height: 100%;width: 10%;border: 1px solid #3b7cbd; ">
              <div style="color: whitesmoke;font-size: 25px;margin-top: 15px;text-align: center">设计温度</div>
            </el-aside>
            <el-aside style="height: 100%;width: 40%;border: 1px solid #3b7cbd; ">
              <div style="color: whitesmoke;font-size: 25px;margin-top: 15px;text-align: center">50℃</div>
            </el-aside>
          </el-container>

          <el-container style="height: 9%;width: 100%;">
            <el-aside style="height: 100%;width: 10%;border: 1px solid #3b7cbd; ">
              <div style="color: whitesmoke;font-size: 25px;margin-top: 15px;text-align: center">操作压力</div>
            </el-aside>
            <el-aside style="height: 100%;width: 40%;border: 1px solid #3b7cbd; ">
              <div style="color: whitesmoke;font-size: 25px;margin-top: 15px;text-align: center">常压</div>
            </el-aside>
            <el-aside style="height: 100%;width: 10%;border: 1px solid #3b7cbd; ">
              <div style="color: whitesmoke;font-size: 25px;margin-top: 15px;text-align: center">操作温度</div>
            </el-aside>
            <el-aside style="height: 100%;width: 40%;border: 1px solid #3b7cbd; ">
              <div style="color: whitesmoke;font-size: 25px;margin-top: 15px;text-align: center">常温</div>
            </el-aside>
          </el-container>

          <el-container style="height: 9%;width: 100%;">
            <el-aside style="height: 100%;width: 10%;border: 1px solid #3b7cbd; ">
              <div style="color: whitesmoke;font-size: 25px;margin-top: 15px;text-align: center">主体材质</div>
            </el-aside>
            <el-aside style="height: 100%;width: 40%;border: 1px solid #3b7cbd; ">
              <div style="color: whitesmoke;font-size: 25px;margin-top: 15px;text-align: center">Q235-B</div>
            </el-aside>
            <el-aside style="height: 100%;width: 10%;border: 1px solid #3b7cbd; ">
              <div style="color: whitesmoke;font-size: 25px;margin-top: 15px;text-align: center">操作介质</div>
            </el-aside>
            <el-aside style="height: 100%;width: 40%;border: 1px solid #3b7cbd; ">
              <div style="color: whitesmoke;font-size: 25px;margin-top: 15px;text-align: center">水</div>
            </el-aside>
          </el-container>

          <el-container style="height: 9%;width: 100%;">
            <el-aside style="height: 100%;width: 10%;border: 1px solid #3b7cbd; ">
              <div style="color: whitesmoke;font-size: 25px;margin-top: 15px;text-align: center">公称壁厚</div>
            </el-aside>
            <el-aside style="height: 100%;width: 40%;border: 1px solid #3b7cbd; ">
              <div style="color: whitesmoke;font-size: 25px;margin-top: 15px;text-align: center">不详</div>
            </el-aside>
            <el-aside style="height: 100%;width: 10%;border: 1px solid #3b7cbd; ">
              <div style="color: whitesmoke;font-size: 25px;margin-top: 15px;text-align: center">腐蚀裕量</div>
            </el-aside>
            <el-aside style="height: 100%;width: 40%;border: 1px solid #3b7cbd; ">
              <div style="color: whitesmoke;font-size: 25px;margin-top: 15px;text-align: center">不详</div>
            </el-aside>
          </el-container>

          <el-container style="height: 9%;width: 100%;">
            <el-aside style="height: 100%;width: 10%;border: 1px solid #3b7cbd; ">
              <div style="color: whitesmoke;font-size: 25px;margin-top: 15px;text-align: center">内径</div>
            </el-aside>
            <el-aside style="height: 100%;width: 40%;border: 1px solid #3b7cbd; ">
              <div style="color: whitesmoke;font-size: 25px;margin-top: 15px;text-align: center">10.3m</div>
            </el-aside>
            <el-aside style="height: 100%;width: 10%;border: 1px solid #3b7cbd; ">
              <div style="color: whitesmoke;font-size: 25px;margin-top: 15px;text-align: center">罐壁高度</div>
            </el-aside>
            <el-aside style="height: 100%;width: 40%;border: 1px solid #3b7cbd; ">
              <div style="color: whitesmoke;font-size: 25px;margin-top: 15px;text-align: center">16.0m</div>
            </el-aside>
          </el-container>

          <el-container style="height: 10%;width: 100%;">
            <el-aside style="height: 100%;width: 10%;border: 1px solid #3b7cbd; ">
              <div style="color: whitesmoke;font-size: 25px;margin-top: 15px;text-align: center">焊缝系数</div>
            </el-aside>
            <el-aside style="height: 100%;width: 40%;border: 1px solid #3b7cbd; ">
              <div style="color: whitesmoke;font-size: 25px;margin-top: 15px;text-align: center">不详</div>
            </el-aside>
            <el-aside style="height: 100%;width: 10%;border: 1px solid #3b7cbd; ">
              <div style="color: whitesmoke;font-size: 25px;margin-top: 15px;text-align: center">储罐图号</div>
            </el-aside>
            <el-aside style="height: 100%;width: 40%;border: 1px solid #3b7cbd; ">
              <div style="color: whitesmoke;font-size: 25px;margin-top: 15px;text-align: center">不详</div>
            </el-aside>
          </el-container>

          <el-container style="height: 9%;width: 100%;">
            <el-aside style="height: 100%;width: 10%;border: 1px solid #3b7cbd; ">
              <div style="color: whitesmoke;font-size: 25px;margin-top: 15px;text-align: center">设计单位</div>
            </el-aside>
            <el-aside style="height: 100%;width: 40%;border: 1px solid #3b7cbd; ">
              <div style="color: whitesmoke;font-size: 25px;margin-top: 15px;text-align: center">不详</div>
            </el-aside>
            <el-aside style="height: 100%;width: 10%;border: 1px solid #3b7cbd; ">
              <div style="color: whitesmoke;font-size: 25px;margin-top: 15px;text-align: center">设计日期</div>
            </el-aside>
            <el-aside style="height: 100%;width: 40%;border: 1px solid #3b7cbd; ">
              <div style="color: whitesmoke;font-size: 25px;margin-top: 15px;text-align: center">不详</div>
            </el-aside>
          </el-container>

          <el-container style="height: 9%;width: 100%;">
            <el-aside style="height: 100%;width: 10%;border: 1px solid #3b7cbd; ">
              <div style="color: whitesmoke;font-size: 25px;margin-top: 15px;text-align: center">施工单位</div>
            </el-aside>
            <el-aside style="height: 100%;width: 40%;border: 1px solid #3b7cbd; ">
              <div style="color: whitesmoke;font-size: 25px;margin-top: 15px;text-align: center">YUN KEE ENG.CO</div>
            </el-aside>
            <el-aside style="height: 100%;width: 10%;border: 1px solid #3b7cbd; ">
              <div style="color: whitesmoke;font-size: 25px;margin-top: 15px;text-align: center">施工规范</div>
            </el-aside>
            <el-aside style="height: 100%;width: 40%;border: 1px solid #3b7cbd; ">
              <div style="color: whitesmoke;font-size: 25px;margin-top: 15px;text-align: center">BS 2654-1989</div>
            </el-aside>
          </el-container>

          <el-container style="height: 9%;width: 100%;">
            <el-aside style="height: 100%;width: 10%;border: 1px solid #3b7cbd; ">
              <div style="color: whitesmoke;font-size: 25px;margin-top: 15px;text-align: center">验收日期</div>
            </el-aside>
            <el-aside style="height: 100%;width: 40%;border: 1px solid #3b7cbd; ">
              <div style="color: whitesmoke;font-size: 25px;margin-top: 15px;text-align: center">2005年6月</div>
            </el-aside>
            <el-aside style="height: 100%;width: 10%;border: 1px solid #3b7cbd; ">
              <div style="color: whitesmoke;font-size: 25px;margin-top: 15px;text-align: center">投用日期</div>
            </el-aside>
            <el-aside style="height: 100%;width: 40%;border: 1px solid #3b7cbd; ">
              <div style="color: whitesmoke;font-size: 25px;margin-top: 15px;text-align: center">2005年6月</div>
            </el-aside>
          </el-container>

        </el-row>

      </el-row>
    </el-main>
    <div class="map1"><img src="../../../../assets/image/lbx.png"></div>
    <div class="map2"><img src="../../../../assets/image/jt.png"></div>
    <div class="map3"><img src="../../../../assets/image/map.png"></div>
  </el-container>
</template>

<script>
  import ElContainer from "element-ui/packages/container/src/main"
  import ElAside from "element-ui/packages/aside/src/main"
  import ElHeader from "element-ui/packages/header/src/main"
  import ElMain from "element-ui/packages/main/src/main"

  import { get, get as userType, del, dels } from '@/api/sys/connSysAuthApi'
  import { parseTime } from '@/utils'
  import { req } from '@/api/base/BaseApi'

  import Calendar from 'vue-calendar-component'

  export default {
    name: 'index',
    components: { Calendar },
    comments: {
      ElMain,
      ElHeader,
      ElAside,
      ElContainer,

    },
    methods: {
      dateFormat(time) {
        var date = new Date(time)
        var year=date.getFullYear()
        /* 在日期格式中，月份是从0开始的，因此要加0
         * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
         * */
        var month= date.getMonth()+1<9 ? "0"+(date.getMonth()+1) : date.getMonth()+1
        var day=date.getDate()<9 ? "0"+date.getDate() : date.getDate()
        var hours=date.getHours()<9 ? "0"+date.getHours() : date.getHours()
        var minutes=date.getMinutes()<9 ? "0"+date.getMinutes() : date.getMinutes()
        var seconds=date.getSeconds()<9 ? "0"+date.getSeconds() : date.getSeconds()
        // 拼接
        return year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds
      },
      tableRowStyle({ row, rowIndex }) {
        return 'background-color: #02152f;color: #fff'
      },
      tableHeaderColor({ row, column, rowIndex, columnIndex }) {
        if (rowIndex === 0) {
          return 'background-color: #2ec7c9;color: #fff;font-weight: 500;'
        }
      },
      handleSetLineChartData(type) {
        this.lineChartData = lineChartData[type]
      },
      getRowClass({ row, column, rowIndex, columnIndex }) {
        return 'background:#06134A;color:#72C22D;'
      },
      getTableDataFormSon(data) {
        const tableDataTemp = data
        this.tableData = []
        for (let j = 9; j >= 0; j--) {
          const tableDataI = {}
          for (let i = 0; i < this.measurePoints.length; i++) {
            const point = this.measurePoints[i]
            const values = tableDataTemp.get(point)
            const date = new Date(values[j].name)
            if (i <= 0) {
              tableDataI['time'] = date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate() + ' ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds()
            }
            tableDataI[point + 'value'] = values[j].value
          }
          this.tableData.push(tableDataI)
        }
        this.currTableData = []
        for (let i = 0; i < this.measurePoints.length; i++) {
          const point = this.measurePoints[i]
          const values = tableDataTemp.get(point)
          const date = new Date(values[values.length - 1].name)
          this.currTableData.push({
            point: point,
            data: values[values.length - 1].value,
            time: date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds()
          })
        }
      },
      show() {//显示所有工艺流程信息

        this.mydate = this.year + '-' + this.month + '-' + this.day
        console.log(this.mydate)
        req('/api/sys/auth/MG/pointList/' + this.mydate, 'GET', '').then(response => {
          var i = 0
          var str = ''
          for (i; i < 56; i++) {
            if (i < 7){ str = 'f00'
            }
            else { str = 'f0'}
            str += (i + 3)
            this.tableData[i].workTemperature = response.data[0][str]
            //console.log(this.tableData[i].workTemperature)
          }

        }).catch(() => console.log('page request error'))
      },
      yearChange(id, type) {
        this.year = id
      },
      monthChange(id, type) {
        this.month = id
      },
      dayChange(id, type) {
        this.day = id
      },
      handleSizeChange: function (size) {
        this.pagesize = size;
      },
      handleCurrentChange: function(currentPage){
        this.currentPage = currentPage;
      }
    },
    created() {
      // req('/api/sys/auth/MG/pointIndexList', 'POST', '').then(response => {
      //   var i = 0
      //   for (i; i < 56; i++) {
      //     this.tableData[i].one = response.data[i].id
      //     this.tableData[i].two = response.data[i].part
      //     this.tableData[i].three = response.data[i].partcontent
      //   }
      // }).catch(() => console.log('page request error'))
    },
    data() {
      return {
        date: new Date(),
        year: '',
        month: '',
        day: '',
        mydate: '',
        calendar: {},
        currentPage:1,
        pagesize: 20,
      }
    },
    filters: {
      userTypeFilter(type) {
        let typeText = type
        userTypes.forEach((val) => {
          if (type === val.value) {
            typeText = val.name
          }
        })
        return typeText
      },
      menuFilter(ids) {
        let length = 0
        if (ids) {
          length = ids.length
        }
        return length
      },
      dateTimeFilter(time) {
        return parseTime(time)
      }
    },
    mounted() {
      let _this = this //声明一个变量指向vue实例this,保证作用域一致
      this.timer = setInterval(function() {
        _this.date = new Date()//修改数据date
      }, 1000),
        console.log(this.$route.path)    // 输出当前页面的路由，如：/home
    }
  }

</script>

<style lang="less" scoped>
  .headerbackgroud{
    background-image: url("../../../../assets/screen-header.jpg");
  }
  .allbody{
    width:1850px;
    height:1050px;
    background-image: url("../../../../assets/bg.jpg");

  }
  .rowclass{
    width: 100%;
    height: 50%;
  }

  #text{
    -webkit-text-fill-color:white
  ;
  }
  .select{
    color: white;
  }
  .hello{
    // 未选中任何选项的时候 placeholder的样式 需要先选中父元素 增加权重
    /deep/ input::-webkit-input-placeholder {
      color: #fff;
    }
    /deep/  input::-moz-input-placeholder {
      color: #fff;
    }
    /deep/  input::-ms-input-placeholder {
      color: #fff;
    }

    //修改的是el-input的样式
    //一种方法是设置最里层el-input__inner的背景色 外层的两级父元素设置为透明色
    //另一种方法是从el-select到el-input__inenr的背景色都设置为需要的颜色
    /deep/ .el-select,
    /deep/ .el-input,
    /deep/ .el-input__inner{
      background-color:#08164D ;
      color:#fff;
      border:0px;
      border-radius:0px;
      text-align: center;
    }
  }
  .map1,.map2, .map3{ position:absolute; opacity: .5}
  .map1{ margin-left:580px;margin-top:230px;z-index: 2;  animation: myfirst2 15s infinite linear;}
  .map2{ margin-left:625px;margin-top:275px;z-index: 3; opacity: 0.2; animation: myfirst 10s infinite linear;}
  .map3{ margin-left:650px;margin-top:300px;z-index: 1;}
  @keyframes myfirst2
  {
    from {transform: rotate(0deg);}
    to {transform: rotate(359deg);}
  }

  @keyframes myfirst
  {
    from {transform: rotate(0deg);}
    to {transform: rotate(-359deg);}
  }
</style>
